<template>
  <div class="dashboard-container flex flex-column">
    <div class="dashboard-header flex align-center">
      <img src="@/static/桂林人民LOGO.png" class="logo" >
      <div class="title-box flex-auto" @click="jump" style="cursor: pointer">
        <div class="title">党建下的引领与凝聚</div>
        <div class="hospital-name">桂林市人民医院</div>
      </div>
      <div class="right-box flex align-center">
        <div class="time-box">
          <div class="current-time-label">当前时间</div>
          <div class="current-time-value">{{currentTime}}</div>
        </div>
        <div>
          <img src="@/static/医生图标.png" class="avatar">
          <div class="user-name">院长视角</div>
        </div>
      </div>
    </div>

    <div class="dashboard-main flex justify-content-space-between flex-auto" style="gap: 20px; height: calc(100vh - 120px);">
        <div class="left-wrapper flex-auto flex flex-column" style="gap: 20px;">
             <div class="top-content flex justify-content-space-between" style="gap: 20px;">
              <div class="echats-left flex-auto" style="background-color: #22283A;padding: 20px;border-radius: 5px;">
                  <div class="flex justify-content-space-between align-center">
                    <div class="flex align-center">
                      <img src="@/static/实时政治.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                      <div style="font-size: 20px;font-weight: bolder">实时政治要闻</div>
                    </div>
                    <div class="flex align-center" style="background-color: #3D2A38;color: #B5953E;padding: 6px 12px;font-size: 14px;border-radius: 7px;">实时更新</div>
                  </div>
                  <div class="news-container" style="overflow-y: auto;height: 335px;">
                  <div class="news-item flex align-center" style="margin-top: 10px;padding-left: 10px;border-left: 5px solid #AD3432;"
                       v-for="(item, index) in newsList" :key="index">
                         <img :src="item.img" style="width: 120px;height: 100px; margin-right: 20px" alt="" />
                         <div class="flex flex-column justify-content-space-between" style="height: 100px;width: 100%;">
                              <div class="title" style="font-size: 18px">{{item.title}}</div>
                              <div class="desc" style="padding: 10px 0;color: #ffffff">{{item.desc}}</div>
                              <div class="time" style="color: #787676">{{item.time}}</div>
                       </div>

                  </div>
                </div>
              </div>
                <!--  右侧图表数据 -->
                <div class="echats-right flex-auto flex flex-column" style="gap: 10px">
                  <div class="flex align-center justify-content-space-between">
                    <div class="flex align-center">
                      <img src="@/static/组织结构.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                      <div style="font-size: 20px;font-weight: bolder">组织结构概览</div>
                    </div>
                    <div class="flex align-center" style="color: #5994AE;font-size: 14px;">共{{organizationOptions.data.displayCPCInfoCount}}名党员</div>
                  </div>
                  <!--图表区域 -->
                  <div class="flex-auto flex flex-column">
                    <ECharts :options="organizationOptions.echarts" style="flex: 1;height: 100%;"></ECharts>

                  </div>
                  <!--底部内容区域  -->
                  <div class="flex justify-content-space-between align-center" style="gap: 20px;">
                    <div style="background-color: #22283A;border-radius: 10px;padding: 20px 0;" class="flex-auto">
                          <div style="text-align: center;color: #9F3434;font-weight: bolder;font-size: 22px">{{organizationOptions.data.displayOrganizationCount}}</div>
                          <div style="text-align: center;margin-top: 5px;color: #727885">党支部</div>
                       </div>
                    <div style="background-color: #22283A;border-radius: 10px;padding: 20px 0;" class="flex-auto">
                      <div style="text-align: center;color: #67ACC9;font-weight: bolder;font-size: 22px">{{organizationOptions.data.displayGroupCount}}</div>
                      <div style="text-align: center;margin-top: 5px;color: #727885">党小组</div>
                    </div>
                    <div style="background-color: #22283A;border-radius: 10px;padding: 20px 0;" class="flex-auto">
                      <div style="text-align: center;color: #C17C31;font-weight: bolder;font-size: 22px">{{organizationOptions.data.displayCPCInfoCount}}</div>
                      <div style="text-align: center;margin-top: 5px;color: #727885">党员干部</div>
                    </div>
                  </div>
                </div>
             </div>
             <!--   中央图表 -->
             <div class="center-content flex-auto flex flex-column" style="background-color: #22283A;padding: 20px;border-radius: 5px">
               <div class="flex align-center justify-content-space-between">
                 <div class="flex align-center">
                   <img src="@/static/三会一课.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                   <div style="font-size: 20px;font-weight: bolder">三会一课活动统计</div>
                 </div>
                 <div class="flex align-center" style="color: #fff;font-size: 14px;background-color: #383E4E;padding: 5px 10px;border-radius: 5px">年度</div>
               </div>
               <ECharts :options="activityStatisticsOptions" style="flex: 1;height: 100%;"></ECharts>
             </div>
             <div class="bottom-content flex-auto flex flex-column" style="background-color: #22283A;padding: 20px;border-radius: 5px">
               <div class="flex align-center justify-content-space-between">
                 <div class="flex align-center">
                   <img src="@/static/荣誉史.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                   <div style="font-size: 20px;font-weight: bolder">医院党建荣誉史</div>
                 </div>
              </div>
                <div class="flex-auto flex align-center" style="margin-top: 20px;padding: 0 40px;">
                  <img src="@/static/荣誉史.jpg" style="width: 140px;height: 140px;margin:0 120px;" alt="">
                  <div class="flex-auto flex flex-column">
                       <div class="flex align-center">
                          <div style="border-radius: 10px; background-color: #413837;color: #9C6831;padding: 4px 10px;width: fit-content;">国家级</div>
                          <div style="font-size: 20px;margin-left: 20px">全国卫生系统党建工作先进单位</div>
                       </div>
                       <div class="desc-text flex-auto" style="color: #AEB1B9;font-size: 16px;margin-top: 10px">医院党委坚持以习近平新时代中国特色社会主义思想为指导,深入贯彻落实的卫生健康工作方针,充分发挥了党组织战斗堡垒作用和党员先锋模范作用,党建工作与医疗业务深度融合，成效显著。</div>
                   <div class="footer-text" style="color: #767C89;margin-top: 10px">2025年6月 | 国家卫生健康委员会、中央和国家机关工作委员会联合颁发</div>
                  </div>
                </div>
             </div>
        </div>
        <div class="right-wrapper  flex flex-column" style="width: 400px;gap: 20px;">
            <div class="box-1 flex-auto flex flex-column" style="background-color: #22283A;border-radius: 5px;">
              <div class="flex align-center justify-content-space-between">
                <div class="flex align-center" style="padding:20px 0 0 20px;">
                  <img src="@/static/党员发展.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                  <div style="font-size: 20px;font-weight: bolder">党员发展情况</div>
                </div>
              </div>
              <!--图表区域 -->
              <div class="flex-auto  flex flex-column" style="padding: 10px;box-sizing: border-box">
                <ECharts :options="partyMemberOptions" style="flex: 1;height: 100%;"></ECharts>
              </div>
              <!--底部内容区域  -->
              <div class="flex justify-content-space-between align-center" style="gap: 20px;margin-bottom: 10px">
                <div  class="flex-auto">
                  <div style="text-align: center;margin-top: 5px;color: #727885">入党积极分子</div>
                  <div style="text-align: center;color: #67ACC9;font-weight: bolder;font-size: 22px;margin-top: 10px">12</div>
                </div>
                <div  class="flex-auto">
                  <div style="text-align: center;margin-top: 5px;color: #727885">预备党员</div>
                  <div style="text-align: center;color: #67ACC9;font-weight: bolder;font-size: 22px;margin-top: 10px">8</div>
                </div>
                <div  class="flex-auto">
                  <div style="text-align: center;margin-top: 5px;color: #727885">转正党员</div>
                  <div style="text-align: center;color: #67ACC9;font-weight: bolder;font-size: 22px;margin-top: 10px">5</div>
                </div>
              </div>
            </div>
          <div class="box-1 flex-auto flex flex-column" style="background-color: #22283A;border-radius: 5px;">
              <div class="flex align-center justify-content-space-between">
                <div class="flex align-center" style="padding:20px 0 0 20px;">
                  <img src="@/static/组织学习.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                  <div style="font-size: 18px;font-weight: bolder">组织学习进度</div>
                </div>
              </div>
              <!--图表区域 -->
              <div class="flex-auto  flex flex-column" style="padding: 10px;box-sizing: border-box">
                <ECharts :options="learningProgressOptions" style="flex: 1;height: 100%;"></ECharts>
              </div>
              <!--底部内容区域  -->
              <div class="flex flex-auto justify-content-space-between align-center" style="gap: 10px;margin-bottom: 10px">
                  <div style="text-align: center;padding: 0 20px;">
                        <div style="font-weight: bolder;color: #D18636;font-size: 20px">87.5%</div>
                        <div style="color: #9599A5">平均完成率</div>
                     </div>
                  <div style="text-align: end;padding: 0 10px;" class="flex-auto">
                  <div style="color: #9599A5;">本月学习任务</div>
                  <div style="color: #ffffff">《习近平谈治国理政》专题学习</div>
                </div>
              </div>
            </div>

          <div class="box-1 flex-auto flex flex-column" style="background-color: #22283A;border-radius: 5px;">
            <div class="flex align-center justify-content-space-between">
              <div class="flex align-center" style="padding:20px 0 0 20px;">
                <img src="@/static/党费管理.png" style="display: block; width: 30px;height: 30px;margin-right: 10px;" alt="">
                <div style="font-size: 18px;font-weight: bolder">党费管理分析</div>
              </div>
            </div>
            <!--图表区域 -->
            <div class="flex-auto  flex flex-column" style="padding: 10px;box-sizing: border-box">
              <ECharts :options="trendOptions" style="flex: 1;height: 100%;"></ECharts>
            </div>
            <!--底部内容区域  -->
            <div class="flex justify-content-space-between align-center" style="gap: 20px;padding:0 20px;margin-bottom: 10px">
              <div class="flex-auto" style="background-color: #2D3344;border-radius: 5px;padding: 10px 0">
                <div style="text-align: center;margin-top: 5px;">本月应缴</div>
                <div style="text-align: center;font-weight: bolder;font-size: 18px;margin-top: 10px">￥12856</div>
              </div>
              <div class="flex-auto" style="background-color: #2D3344;border-radius: 5px;padding: 10px 0">
                <div style="text-align: center;margin-top: 5px;">已缴比例</div>
                <div style="text-align: center;font-weight: bolder;font-size: 18px;margin-top: 10px">98.7%</div>
              </div>
            </div>

          </div>
        </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
import ECharts from '@/components/ECharts.vue'
import { useRouter } from 'vue-router'
import { useCurrentTime } from '@/hooks/useCurrentTime'
import {
  getFourAchievementsFun, getFourBrainDrainAlertFun,
  getFourChiefPhysicianFun,
  getFourDepartInfoCountFun,
  getFourHighMaterialCountFun, getFourPatientInfoFun, getFourPatientKeyWordFun, getFourSatisfiedPatientInfoFun,
  getFourSurgicalTimeCountFun
} from "@/api/potential/index.js";
import {getOrganizationInfoCountFun} from "@/api/party/building.js";
const { currentTime } = useCurrentTime()
const router = useRouter()
const jump = () => {
  router.push({path:"/NavPage"})
}
// 新闻数据示例
const newsList = ref([
  {
    img: new URL('@/static/01.jpg', import.meta.url).href,
    title: '习近平总书记在全国卫生与健康大会上发表重要讲话',
    desc: '强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障，强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障强调把保障人民健康放在优先发展的战略位置，为建设健康中国提供有力保障',
    time: '2025-11-02 09:30'
  },
  {
    img: new URL('@/static/02.png', import.meta.url).href,
    title: '国家卫健委召开公立医院党建工作推进会',
    desc: '部署加强公立医院党的建设，推动党建与业务深度融合',
    time: '2025-11-05 14:15'
  },
  {
    img: new URL('@/static/03.jpg', import.meta.url).href,
    title: '党的二十大报告学习辅导材料出版发行',
    desc: '为广大党员干部群众深入学习领会党的二十大精神提供权威辅导',
    time: '2025-11-06 12:45'
  }
])
// 组织结构概览
const organizationOptions = ref({
  data:{},
  echarts:{
    tooltip: {
      trigger: 'item',
      formatter: function(params) {
        return `<div style="padding: 5px; background-color: #fff; border-radius: 4px;">${params.name}</div>`;
      }
    },
    series: [
      {
        type: 'tree',
        data: [
          {
            name: '医院党委',
            children: [
              {
                name: '行政党支部',
                children: [
                  { name: '机关党小组' },
                  { name: '后勤党小组' }
                ]
              },
              {
                name: '内科党支部',
                children: []
              },
              {
                name: '外科党支部',
                children: [
                  { name: '外科一党小组' },
                  { name: '外科二党小组' },
                  { name: '外科三党小组' }
                ]
              },
              {
                name: '门诊党支部',
                children: []
              },
              {
                name: '医技党支部',
                children: [
                  { name: '医技一党小组' },
                  { name: '医技二党小组' }
                ]
              }
            ]
          }
        ],
        expandAndCollapse: true,
        animationDuration: 500,
        animationDurationUpdate: 750,
        roam: true,
        label: {
          normal: {
            position: 'left',
            color: '#FFFFFF',
            fontSize: 14
          }
        },
        leaves: {
          label: {
            normal: {
              position: 'left',
              color: '#FFFFFF',
              fontSize: 12
            }
          }
        },
        lineStyle: {
          normal: {
            color: '#999',
            width: 1.5,
            opacity: 0.6
          }
        },
        itemStyle: {
          normal: {
            color: '#ffffff',
            borderColor: '#ffffff',
            borderWidth: 2
          }
        },
        emphasis: {
          itemStyle: {
            color: '#ff9933'
          }
        },
        // 自定义节点颜色
        symbolSize: 12,
        symbol: 'circle',
        // 节点颜色映射
        nodeStyle: {
          normal: {
            color: function(params) {
              const name = params.data.name;
              if (name === '医院党委') return '#FF0000'; // 红色
              if (name.includes('行政')) return '#00BFFF'; // 天蓝
              if (name.includes('内科')) return '#4169E1'; // 深蓝
              if (name.includes('外科')) return '#FFA500'; // 橙色
              if (name.includes('门诊')) return '#32CD32'; // 绿色
              if (name.includes('医技')) return '#8A2BE2'; // 紫色
              return '#FFFFFF'; // 白色
            }
          }
        },
        edgeLabel: {
          normal: {
            show: false
          }
        },
        layout: 'horizontal',
        orientation: 'LR',
        rootLocation: { x: 100, y: 100 }
      }
    ],
    backgroundColor: '#22283A',
    grid: {
      left: '10%',
      right: '10%',
      top: '10%',
      bottom: '10%'
    }
  }
});
// 三会一课
const activityStatisticsOptions =ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['党员大会', '支部委员会', '党小组会', '党课'],
    textStyle: {
      color: '#FFFFFF'
    },
    top: '0%',
    left:"center"
  },
  grid: {
    left: '0%',
    right: '10%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
      color: '#FFFFFF'
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#FFFFFF'
    },
    splitLine: {
      lineStyle: {
        color: '#2D3A4C'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  series: [
    {
      name: '党员大会',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#AD3432'
      },
      data: [2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1]
    },
    {
      name: '支部委员会',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#67ACC9'
      },
      data: [1, 2, 1, 2, 2, 2, 2, 2, 2, 2, 3, 2]
    },
    {
      name: '党小组会',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#C17C31'
      },
      data: [3, 2, 3, 2, 3, 3, 3, 2, 3, 2, 3, 2]
    },
    {
      name: '党课',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#3B5998'
      },
      data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
    }
  ],
  backgroundColor: '#22283A'
})
// 党员发展情况
const partyMemberOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params) {
      const year = params[0].axisValue;
      const newMembers = params[0].data;
      const totalMembers = params[1] ? params[1].data : 0;
      return `
        <div style="padding: 5px; background-color: #fff; border-radius: 4px;">
          <p><strong>${year}</strong></p>
          <p>新增党员：${newMembers}</p>
          <p>党员总数：${totalMembers}</p>
        </div>
      `;
    }
  },
  legend: {
    data: ['新增党员', '党员总数'],
    textStyle: {
      color: '#FFFFFF'
    },
    top: '0%',
    left: 'center'
  },
  grid: {
    left: '0%',
    right: '10%',
    bottom: '0%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['2018', '2019', '2020', '2021', '2022', '2023'],
    axisLabel: {
      color: '#FFFFFF'
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  yAxis: [
    {
      type: 'value',
      name: '新增党员',
      position: 'left',
      axisLabel: {
        color: '#ffffff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(252,252,255,0.09)'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      nameTextStyle: {
        color: '#fdfdfd', // 红色文字
        fontSize: 14,
      }
    },
    {
      type: 'value',
      name: '党员总数',
      position: 'right',
      axisLabel: {
        color: '#FFFFFF'
      },
      splitLine: {
        lineStyle: {
          color: '#e9ebf3'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      nameTextStyle: {
        color: '#fdfdfd', // 红色文字
        fontSize: 14,
      }
    }
  ],
  series: [
    {
      name: '新增党员',
      type: 'bar',
      axisLabel: {
        color: '#FFFFFF'  // 修改为白色
      },
      itemStyle: {
        color: '#36b0e7'
      },
      data: [115, 220, 235, 252, 310, 128]
    },
    {
      name: '党员总数',
      type: 'line',
      symbol: 'circle',
      symbolSize: 6,
      data: [180, 200, 220, 240, 260, 305]
    }
  ],
});
// 组织学习进度
const learningProgressOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params) {
      const value = params[0].value;
      return `
        <div style="padding: 5px; background-color: #fff; border-radius: 4px;">
          <p><strong>${params[0].name}</strong></p>
          <p>学习完成率：${value}%</p>
        </div>
      `;
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '5%',
    top:'5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['行政', '内科', '外科', '门诊', '医技'],
    axisLabel: {
      color: '#FFFFFF'
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}%',
      color: '#FFFFFF'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(252,252,255,0.09)'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  series: [
    {
      name: '学习完成率',
      type: 'bar',
      itemStyle: {
        color: '#f1ab3b'
      },
      label: {

        position: 'top',
        formatter: '{c}%',
        color: '#FFFFFF'
      },
      data: [95, 85, 88, 75, 92]
    }
  ],
  backgroundColor: '#22283A'
});
// 党费管理分析
const trendOptions = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function(params) {
      const value = params[0].value;
      return `
        <div style="padding: 5px; background-color: #fff; border-radius: 4px;">
          <p><strong>${params[0].name}</strong></p>
          <p>数值：${value.toLocaleString()} </p>
        </div>
      `;
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '5%',
    top: '5%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['6月', '7月', '8月', '9月', '10月', '11月'],
    axisLabel: {
      color: '#FFFFFF'
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      color: '#FFFFFF',
      formatter: '{value}'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(252,252,255,0.09)'
      }
    },
    axisLine: {
      lineStyle: {
        color: '#404040'
      }
    }
  },
  series: [
    {
      name: '趋势数据',
      type: 'line',
      smooth: true, // 平滑曲线
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: {
        color: '#ffffff'
      },
      lineStyle: {
        color: '#3B5998' // 蓝色线条
      },
      areaStyle: {
        color: 'rgba(59, 89, 152, 0.3)'
      },
      data: [11000, 11500, 12000, 12500, 12800, 13000]
    }
  ]
});
// ==============================================
// 将API返回的数据转换为ECharts树形图所需格式
const transformOrganizationData = (apiData) => {
  const transformNode = (node) => {
    return {
      name: node.organizationName,
      children: node.children ? node.children.map(transformNode) : []
    };
  };
  if (apiData.children && apiData.children.length > 0) {
    return apiData.children.map(transformNode);
  }
  return [];
};

// 组织结构概览
const organizationOptionsApi = (data)=>{
  const transformedData = transformOrganizationData({ children: data.children });
  nextTick(()=>{
    organizationOptions.value.data = data.pbcpcInfoDto;
    organizationOptions.value.echarts.series[0].data = transformedData;
  })
}








const updateDashboardCharts = async () => {
  const results = await Promise.allSettled([
    getOrganizationInfoCountFun(),
  ]);
  if (results[0].status == 'fulfilled' && results[0].value.data.code == 200) {
     organizationOptionsApi(results[0].value.data.data);
  }

};
onMounted(() => {
  updateDashboardCharts();
});









</script>
<style scoped lang="less">
.dashboard-container {
  width: 100%;
  height: 100%;
  background-color: #0F172A;
  font-family: 'Microsoft YaHei', sans-serif;
  color: var(--text-color);
  padding: 10px 20px;
  box-sizing: border-box;
  .dashboard-header {
    padding: 10px 0;
    .logo{
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .title-box{
      margin-left: 20px;
      .title{
        font-size: 21px;
        font-weight: bolder;
      }
      .hospital-name{
        font-size: 14px;
        padding-top: 5px;
        color: #818999;
      }
    }
    .right-box{
      .time-box{
        margin-right: 20px;
        .current-time-label{
          font-size: 12px;
          color: #818999;
        }
        .current-time-value{
          font-size: 18px;
          padding-top: 5px;
          font-weight: bolder;
        }

      }
      .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 auto;
        display: block;
      }
      .user-name{
        font-size: 12px;
        padding-top: 5px;
        color: #818999;
      }
    }
  }
  .dashboard-main {
    margin-top: 10px;
    .left-wrapper{
      border-radius: 5px;
      .news-container{
        .news-item{
           border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          .desc{
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 限制为两行 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .desc-text{
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 限制为两行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .right-wrapper{
      border-radius: 5px;
    }

  }
}

</style>
